<template>
	<Codemirror
			className="code-mirror"
			:value="JSON.stringify(content, null, '\t')"
			:options="cmOptions"
			border
			ref="cmRef"
			height="500px"
			style="width: 100%"
			@change="onChange"
			@input="onInput"
			@ready="onReady"
	/>
</template>

<script setup lang="ts">
import Codemirror from "codemirror-editor-vue3"
import {ref} from "vue";
import type {CmComponentRef} from "codemirror-editor-vue3"
import type {Editor, EditorConfiguration} from "codemirror"

import "codemirror/theme/ayu-mirage.css";
import "codemirror/theme/neo.css";
import 'codemirror/theme/rubyblue.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/fold/foldgutter.css'

// 折叠
import "codemirror/mode/javascript/javascript.js"
import 'codemirror/addon/lint/json-lint.js'
import 'codemirror/addon/lint/lint.js'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js'

const props = defineProps({
	"content": {
		type: String,
		default: ""
	}
})

const cmRef = ref<CmComponentRef>()

const cmOptions: EditorConfiguration = {
	mode: "application/json",
	lineNumbers: true, // Show line number
	lineWrapping: true,
	smartIndent: true, // Smart indent
	indentUnit: 4, // The smart indent unit is 2 spaces in length
	foldGutter: true, // Code folding启用折叠效果
	// matchBrackets: true,
	// autoCloseBrackets: true,
	// styleActiveLine: true, // Display the style of the selected row
	readOnly: true,
	theme: 'ayu-mirage',
	gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'], // 配置折叠参数
}

const onChange = (val: string, cm: Editor) => {
}

const onInput = (val: string) => {
}

const onReady = (cm: Editor) => {
}

onMounted(() => {
	/*setTimeout(() => {
		cmRef.value?.refresh()
	}, 1000)

	setTimeout(() => {
		cmRef.value?.resize(300, 200)
	}, 2000)

	setTimeout(() => {
		cmRef.value?.cminstance.isClean()
	}, 3000)*/
})

onUnmounted(() => {
	cmRef.value?.destroy()
})

</script>

<style lang="scss" scoped>
.code-mirror {
	width: max-content;
	font-size: 13px;
	line-height: 120%;
}
</style>
